<template>
	<!-- 门店地址设置 -->
	<view class="">
		<u-form class="form-box" :model="form" ref="uForm" label-width="100rpx">
			<u-form-item label="" :border-bottom="false" right-icon="search">
				<u-input v-model="form.keywords" type="text" placeholder="请输入门店地址"  @click="chooseloacation"/>
			</u-form-item>
			<view class="u-flex">
				<view class="u-flex-1">
					<u-form-item label="经度：" :border-bottom="false">
						<u-input v-model="form.latitude" type="text" placeholder="暂无经度" />
					</u-form-item>
				</view>
				<view class="u-flex-1">
					<u-form-item label="纬度：" :border-bottom="false">
						<u-input v-model="form.longitude" type="text" placeholder="暂无纬度" />
					</u-form-item>
				</view>
			</view>
			<map style="width: 100%; height: 500px;" :latitude="form.latitude" :longitude="form.longitude">
			</map>
			<view class="tip">
				精度{{form.latitude}}*拖动地图找到自己门店位置，显示经纬度即可保存
			</view>
		</u-form>
		<!-- :markers="markers" -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					keywords: '',
					latitude:'',
					longitude:''
				}
			}
		},
		onLoad() {
			var _this = this;
			uni.getLocation({
				type: 'gcj02',
				success: function(res) {
					_this.form.latitude = res.latitude;
					_this.form.longitude = res.longitude;
					
				}
			});
		},
		methods: {
			chooseloacation(){
				uni.chooseLocation({
					success: (res) => {
						console.log(res)
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.form-box {
		padding: 0 30rpx;
	}

	.tip {
		color: #FD0101;
	}

	/deep/.u-form-item--right__content {
		padding: 0 10rpx;
		border: 1rpx solid #DDDADA;
		border-radius: 5rpx;
	}

	.no-border-input {
		/deep/.u-form-item--right__content {
			border: 0 solid #DDDADA;

		}
	}

	/deep/.uni-map {
		width: 100%;
		height: 400rpx;
	}

	.text_box {
		margin: 10px 25px;
		border-bottom: 1px solid #c3c3c3;
		padding-bottom: 10px
	}
</style>
